<template>
  <view class="bar-box-wrap" :style="customStyle">
    <view class="address-box" @tap="handleToSelectAddress">
      <view class="address-text">{{ regionName }}</view>
      <view class="iconfont icon-arrow-right arrow"></view>
    </view>
  </view>
</template>

<script>
import { mapState } from 'vuex';

export default {
  props: {
    showSkeleton: {
      type: Boolean,
      default: false,
    },
    regionName: {
      type: String,
      default: 'XX村',
    },
  },
  data() {
    return {};
  },
  computed: {
    ...mapState({
      statusBarHeight: state => state.cms.statusBarHeight,
      gap: state => state.cms.gap,
    }),
    customStyle() {
      const paddingTop = `${this.statusBarHeight + this.gap + 1}px`;
      const paddingBottom = `${this.gap + 6}px`;
      return `padding-top: ${paddingTop};padding-bottom: ${paddingBottom}`;
    },
  },
  methods: {
    handleToSelectAddress() {
      this.$emit('listenSelectAreaOpen');
    },
  },
};
</script>

<style lang="less">
.bar-box-wrap {
  display: flex;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
  height: 30px;
  box-sizing: content-box;
  background-color: #FFF27C;
  padding-left: 30rpx;
  padding-right: 30rpx;
  .address-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 174rpx;
    height: 64rpx;
    border-radius: 32rpx;
    background-color: rgba(255,255,255,0.5);
    .address-text {
      font-size: 28rpx;
      font-weight: 700;
    }
    .arrow {
      font-size: 24rpx;
      margin-left: 4rpx;
    }
  }

}
</style>
